<template>
    <Layout style="background-color: white">
        <Modal title="检查任务" :transfer=false v-model="noModel" :width=1200 @on-cancel="modelClose">
        <Form ref="dataForm" :model="dataForm" :label-width="100">
           <!-- <Row>
                <Col span="24" style="font-size:16px;color:#464c5b;font-weight: bold">
                    <Divider orientation="left">检查任务信息</Divider>
                </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                    <FormItem label="任务名称:">
                        {{dataForm.taskName}}
                    </FormItem>
                </Col>
                <Col span="11">
                    <FormItem label="检查日期:">
                        {{dataForm.taskDate}}
                    </FormItem>
                </Col>
            </Row>

            <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                    <FormItem label="检查单位:" prop="execOrgId">
                        {{dataForm.execOrgName}}
                    </FormItem>
                </Col>
                <Col span="11">
                    <FormItem label="检查人:" prop="execUserId">
                        {{dataForm.execUserName}}
                    </FormItem>
                </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                    <FormItem label="受检单位:" prop="checkedOrg">
                        {{dataForm.checkedOrgName}}
                    </FormItem>
                </Col>
                <Col span="11">
                    <FormItem label="参与人员:" prop="participant">
                        <Input type="text" v-model="dataForm.participant"/>
                    </FormItem>
                </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                    <FormItem label="检查级别:" prop="checkLevel">
                        {{dataForm.checkLevelName}}
                    </FormItem>
                </Col>
                <Col span="11" >
                    &lt;!&ndash; <FormItem label="检查类型:">
                         {{dataForm.checkTypeName}}
                     </FormItem>&ndash;&gt;
                </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="23">
                    <FormItem label="检查任务描述:" prop="notes">
                        <Input v-model="dataForm.notes" type="textarea" :autosize="{minRows: 3,maxRows: 5}"/>
                    </FormItem>
                </Col>
            </Row>-->
           <!-- <Row>
                <Col span="24" style="font-size:16px;color:#464c5b;font-weight: bold">
                    <Divider orientation="left">问题录入</Divider>
                </Col>
            </Row>-->
            <Row>
                <Col span="24" class="query-form">
                    <Button v-if="editable" type="primary" class='ivu-btn-add' @click="addRow()">新增</Button>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <Table  :loading="loading" size="small" :columns="pointColumns" :data="pointData" ></Table>
                </Col>
            </Row>
            <!--<Table :columns="pointColumns" :data="pointData" ></Table>-->
           <!-- <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="23">
                    <FormItem>
                        <Button v-if="editable" class='ivu-btn-save' :loading="buttonLoading" @click="saveData()">确定</Button>
                        <Button v-if="editable" class='ivu-btn-cancel' @click="modelClose"
                                style="margin-left: 2px">取消
                        </Button>
                        <Button v-else class='ivu-btn-save' @click="modelClose">关闭</Button>
                    </FormItem>
                </Col>
            </Row>-->
        </Form>
            <div slot="footer">
                <Button v-if="editable" class='ivu-btn-save' :loading="buttonLoading" @click="saveData()">确定</Button>
                <Button v-if="editable" class='ivu-btn-cancel' @click="modelClose"
                        style="margin-left: 2px">取消
                </Button>
                <Button v-else class='ivu-btn-save' @click="modelClose">关闭</Button>
            </div>
        </Modal>
        <cascaderOrg v-if="false"></cascaderOrg>
        <cascaderUser v-if="false"></cascaderUser>

        <Modal title="图片上传" :transfer=false footer-hide v-model="pictureModal" :width=600>
            <Form ref="dataForm" :label-width="100">
                <Row type="flex" justify="space-around" class="code-row-bg" style="margin-top: 10px">
                    <Col span="23">
                        <FormItem label="上传图片：">
                            <div class="demo-upload-list" v-for="item in uploadList" :key="item.id">
                                    <img :src="item.url">
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView(item.name,item.url)"></Icon>
                                        <Icon type="ios-trash-outline" v-if="!editable"></Icon>
                                        <Icon type="ios-trash-outline" v-else @click.native="handleRemove(item)"></Icon>
                                    </div>
                            </div>
                            <Upload
                                    ref="upload"
                                    :show-upload-list="false"
                                    :default-file-list="defaultList"
                                    :format="['jpg','jpeg','png']"
                                    :max-size="1024"
                                    :on-format-error="handleFormatError"
                                    :on-exceeded-size="handleMaxSize"
                                    :before-upload="handleBeforeUpload"
                                    multiple
                                    type="drag"
                                    :action="upUrl"
                                    :disabled="!editable"
                                    style="display: inline-block;width:58px;">
                                <div style="width: 58px;height:58px;line-height: 58px;">
                                    <Icon type="ios-camera" size="20"></Icon>
                                </div>
                            </Upload>
                            <Modal title="View Image" v-model="visible">
                                <img :src="viewUrl" v-if="visible" style="width: 100%">
                                <div slot="footer">
                                    <Button type="primary" class='ivu-btn-save'  @click="visible=false">关闭</Button>
                                </div>
                            </Modal>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Modal>
    </layout>
</template>

<script>
    import {Api} from '../../../../api/index.js'
    import {sessionStorage} from '../../../../common/cacheUtils.js';
    import cascaderOrg from '../../../../components/cascader-org'
    import cascaderUser from '../../../../components/cascader-user'

    export default {
        components: {
            cascaderOrg,cascaderUser
        },
        props:{
            editable :{
                type : Boolean
            },
            mainTaskId :{
                type : String
            },
            noModel:{
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                defaultList: [
                ],
                imgName: '',
                visible: false,
                reportFile:'',
                uploadList: [],
                upUrl:Api.uploadPTWFiles,
                viewUrl : Api.downloadPTWSchemeFile,
                files :[],
                buttonLoading: false,pictureModal : false,
                form1: {},
                dataForm: {},
                dataTable: [],
                model1: false,
                tableHeight: '',
                pointData : [],loading: false,
                pointColumns:[
                   /* {
                        width: 180,
                        title: '存在单位',
                        key: 'existOrgId',
                        align: 'center',
                        render: (h, { row, index }) => {
                            let create = this.$createElement
                            let dom = create(cascaderOrg, {
                                ref : 'org' + index,
                                props: {
                                    // 自定义组件的属性
                                    orgTree : true,
                                    currentOrgId : row.currentOrgId,
                                    currentOrgName : row.currentOrgName,
                                },
                                on: {
                                    setOrgInfo: value => {
                                        this.pointData[index].existOrgId = value[value.length - 1];
                                    },
                                    setOrgname: value => {
                                        this.pointData[index].existOrgName = value;
                                    }
                                }
                            })
                            return dom
                            /!*return h("div", [
                                h(cascaderDom, {
                                    props: {
                                        // 自定义组件的属性
                                        orgTree : true,
                                        currentOrgId : row.currentOrgId,
                                        currentOrgName : row.currentOrgName,
                                    },
                                    on: {
                                        setOrgInfo: value => {
                                            this.pointData[index].existOrgId = value[value.length - 1];
                                        },
                                        setOrgname: value => {
                                            this.pointData[index].existOrgName = value;
                                        }
                                    }
                                })
                            ]);*!/
                        }
                    },
                    {
                        width: 150,
                        title: '检查日期',
                        key: 'reportDate',
                        align: 'center',
                        render: (h, { row, index }) => {
                            return h("DatePicker", {
                                props: {
                                    value: row.reportDate,
                                    type:'date',
                                    format:'yyyy-MM-dd',
                                    transfer: true,
                                },
                                on: {
                                    'on-change':(val) => {
                                        this.pointData[index].reportDate = val;
                                    },
                                }
                            });
                        }
                    },*/
                    {
                        minWidth: 220,
                        title: '检查项目',
                        key: 'reportDesc',
                        align: 'center',
                        render: (h, { row, index }) => {
                            return h("Input", {
                                props: {
                                    value: row.reportDesc,
                                },
                                on: {
                                    input: val => {
                                        this.pointData[index].reportDesc = val;
                                    },
                                }
                            });
                        }
                    },
                   /* {
                        minWidth: 220,
                        title: '检查内容',
                        key: 'writeDesc',
                        align: 'center',
                        render: (h, { row, index }) => {
                            return h("Input", {
                                props: {
                                    value: row.writeDesc,
                                },
                                on: {
                                    input: val => {
                                        this.pointData[index].writeDesc = val;
                                    },
                                }
                            });
                        }
                    },*/
                    {
                        minWidth: 80,
                        title: '照片',
                        key: 'reportDesc',
                        align: 'center',
                        render: (h, { row, index }) => {
                            return h("Icon", {
                                props: {
                                    type: 'md-eye',
                                    size: '20'
                                },
                                style: {
                                    marginRight: "0px"
                                },
                                on: {
                                    click: () => {
                                        this.viewPicture(row);
                                    }
                                }
                            });
                        }
                    },
                    {
                        minWidth: 300,
                        title: '问题描述',
                        key: 'notes',
                        align: 'center',
                        render: (h, { row, index }) => {
                            return h("Input", {
                                props: {
                                    value: row.notes,
                                },
                                on: {
                                    input: val => {
                                        this.pointData[index].notes = val;
                                    },
                                }
                            });
                        }
                    },
                    {
                        minWidth: 150,
                        title: '问题类型',
                        key: 'problemType',
                        align: 'center',
                        render: (h, { row, index }) => {
                            return h("Select", {
                                    props:{
                                        value: row.problemType,
                                        transfer: true,
                                    },
                                    on: {
                                        'on-change':(val) => {
                                            this.pointData[index].problemType = val;
                                        },
                                    }
                                }, [
                                    h('Option',{
                                        props: {
                                            value: '1'
                                        }
                                    },'基础管理'),
                                    h('Option',{
                                        props: {
                                            value: '2'
                                        }
                                    },'现场管理')
                                ]
                            );
                        }
                    },
                    /*{
                        width: 180,
                        title: '录入人',
                        key: 'reportUserId',
                        align: 'center',
                        render: (h, { row, index }) => {
                            let create = this.$createElement
                            let dom = create(cascaderUser, {
                                ref : 'user' + index,
                                props: {
                                    // 自定义组件的属性
                                    setCurrentName :{value : row.currentUserId , label : row.currentUserName },
                                },
                                on: {
                                    setOrgInfo: value => {
                                        this.pointData[index].reportUserId = value[value.length - 1];
                                    },
                                    setOrgname: value => {
                                        this.pointData[index].reportUserName = value;
                                    }
                                }
                            })
                            return dom

                            /!* return h("div", [
                                 h(cascaderDom, {
                                     props: {
                                         // 自定义组件的属性
                                         setCurrentName :{value : row.currentUserId , label : row.currentUserName },
                                     },
                                     on: {
                                         setOrgInfo: value => {
                                             this.pointData[index].reportUserId = value[value.length - 1];
                                         },
                                         setOrgname: value => {
                                             this.pointData[index].reportUserName = value;
                                         }
                                     }
                                 })
                             ]);*!/
                        }
                    },*/
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 80,
                        align: 'center',
                        render: (h, { row, index }) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type : "ios-trash",
                                        size : '20'
                                    },
                                    style: {
                                        marginRight: "0px"
                                    },
                                    on: {
                                        click: () => {
                                            this.pointData.splice(index, 1);
                                        }
                                    }
                                })
                            ]);
                        }
                    }
                ],
                currentUser : {},
            }
        },
        mounted: function () {
            // this.tableHeight = window.innerHeight - 220;
            this.currentUser = {
                label : JSON.parse(sessionStorage('paramUserInfo').get('userInfo'))["createUserName"],
                value: JSON.parse(sessionStorage('paramUserInfo').get('userInfo'))["createUserId"]
            }
            // this.query();
        },
        methods: {
            modelClose(){
                this.$emit('closeModel');
            },
            handleView (name,url) {
                this.viewUrl = url;
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file) {
                //删除操作
                let _this = this;
                let config = {
                    title: '系统提示',
                    content: '确认删除图片吗?',
                    okText: '确定',
                    cancelText: '取消',
                    onOk: function () {

                        _this.$Spin.show({
                            render: (h) => {
                                return h('div', [
                                    h('Icon', {
                                        'class': 'demo-spin-icon-load',
                                        props: {
                                            type: 'ios-loading',
                                            size: 18
                                        }
                                    }),
                                    h('div', 'Loading')
                                ])
                            }
                        });
                        _this.uploadList.splice(_this.uploadList.indexOf(file), 1);

                        _this.$http.delete(Api.downloadPTWSchemeFile  + '/' + file.id).then((res) => {
                            _this.$Message.success('删除成功');
                            _this.uploadList = [];
                            _this.$http.get(_this.upUrl, {params: {}}).then((res) => {
                                if(res.data.data!=null){
                                    res.data.data.map((item)=>{
                                        _this.uploadList.push({ name : item.fileName, id : item.id , url : Api.downloadPTWSchemeFile + '/' + item.id});
                                    });
                                }
                                //this.downloadUrl = this.downloadUrl + '/' + res.data.id;
                            }).catch(e => {
                                console.log(e)
                                this.$Message.error("数据获取失败")
                            })

                            _this.$Spin.hide();
                        }).catch(e => {
                            _this.$Spin.hide();
                            _this.$Message.error('删除失败' + e);
                        })
                    },
                    onCancel: function () {
                    }
                }
                this.$Modal.confirm(config);
            },
            handleFormatError (file) {
                this.$Message.error('格式不正确, 请上传 jpg 或 png');
            },
            handleMaxSize (file) {
                this.$Message.error('图片不能大于1M.');
            },
            handleBeforeUpload (file) {

                if(file.size > 1024 * 1024){
                    this.$Message.error('图片不能大于1M.');
                    return false;
                }
                var index = file.name.lastIndexOf(".");
                var suffix = file.name.substr(index+1);

                if(suffix!='jpg' && suffix!='jpeg' && suffix!='png'){
                    this.$Message.error("请上传jpg,jpeg,png格式的图片");
                    return false;
                }

                const check = this.uploadList.length < 9;
                if (!check) {
                    this.$Message.error('最多上传9张图片');
                    return false;
                }

                let formData = new FormData();
                formData.append("files", file);
                this.$http.post(this.upUrl + '/picture', formData).then((res) => {
                    if (res.data.result == "success") {
                        this.$Message.success("保存成功");
                        // this.uploadList.push(file);
                        this.viewPicture({reportFile:this.reportFile})
                    } else {
                        this.$Message.error("附件上传失败");
                    }
                }).catch(e => {
                    console.log(e);
                    this.$Message.error("数据获取失败");
                })

                return false;
            },
            viewPicture(row){
                this.reportFile=row.reportFile;
                this.upUrl = Api.uploadPTWFiles + '/' + row.reportFile + '/files';
                this.pictureModal = true;
                //根据reportFile查询附件
                this.uploadList = [];
                this.$http.get(this.upUrl, {params: {}}).then((res) => {
                    if(res.data.data!=null){
                        res.data.data.map((item)=>{
                            this.uploadList.push({ name : item.fileName, id : item.id , url : Api.downloadPTWSchemeFile + '/' + item.id});
                        });
                    }
                    //this.downloadUrl = this.downloadUrl + '/' + res.data.id;
                }).catch(e => {
                    console.log(e)
                    this.$Message.error("数据获取失败")
                })
            },
            uuidGenerator() {
                let   originStr = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
                let   originChar = '0123456789abcdef';
                let   len = originChar.length;
                return originStr.replace(/x/g, function(match) {
                    return originChar.charAt(Math.floor(Math.random() * len))
                })

            },
            addRow(){
                this.pointData.push({
                    existOrgId: "",
                    reportDate: this.formatDate(new Date(), 'yyyy-MM-dd'),
                    problemType: '1',
                    reportDesc: "",
                    reportFile: this.uuidGenerator(),
                    notes: "",
                    reportUserId: "",
                    currentUserId : this.currentUser.value,
                    currentUserName : this.currentUser.label,
                    currentOrgId : this.dataForm.checkedOrg,
                    currentOrgName : this.dataForm.checkedOrgName,
                });
            },

            toEdit() {
                console.log(this.mainTaskId)
                this.dataForm = {};
                this.pointData = [];
                let url = Api.getCheckNoModelByTaskId + '/' + this.mainTaskId;
                this.$http.get(url, {}).then((res) => {
                    this.model1 = true;
                    this.dataForm = res.data.instanceMap;
                    if(res.data.problemList==null){
                        this.pointData = [];
                    }else{
                        this.pointData = res.data.problemList;
                    }
                    this.pointData.forEach((item,index)=>{
                        item.currentUserId = item.reportUserId;
                        item.currentUserName = item.reportUserName;
                        item.currentOrgId = item.existOrgId;
                        item.currentOrgName = item.existOrgName;
                        //this.$refs['org' + index].setCurrentOrg();
                    });

                    if(this.dataForm.checkType == '0'){
                        this.dataForm.checkTypeName = '日常检查';
                    }else if(this.dataForm.checkType == '1'){
                        this.dataForm.checkTypeName = '监督检查';
                    }else if(this.dataForm.checkType == '2'){
                        this.dataForm.checkTypeName = '体系审核';
                    }
                    if(this.dataForm.checkLevel == '0'){
                        this.dataForm.checkLevelName = '公司级';
                    }else if(this.dataForm.checkLevel == '1'){
                        this.dataForm.checkLevelName = '二级单位级';
                    }else if(this.dataForm.checkLevel == '2'){
                        this.dataForm.checkLevelName = '班组级';
                    }
                    setTimeout(() => {
                        for(let i=0; i < this.pointData.length ; i ++){
                            this.$refs['user' + i].setCurrentUser();
                            //this.$refs.user1.setCurrentUser();
                            this.$refs['org' + i].setCurrentOrg();
                            //this.$refs.org1.setCurrentOrg();
                        }
                    }, 1000);
                }).catch(e => {
                    this.$Message.error('请求失败' + e);
                })
            },
            viewData(params) {
                console.log(11111111111)
                console.log(this.mainTaskId)
                this.dataForm = {};
                this.pointData = [];
                let url = Api.getCheckNoModelByTaskId + '/' + this.mainTaskId;
                this.$http.get(url, {}).then((res) => {
                    this.model1 = true;
                    this.dataForm = res.data.instanceMap;
                    if(res.data.problemList==null){
                        this.pointData = [];
                    }else{
                        this.pointData = res.data.problemList;
                    }
                    this.pointData.forEach((item,index)=>{
                        item.currentUserId = item.reportUserId;
                        item.currentUserName = item.reportUserName;
                        item.currentOrgId = item.existOrgId;
                        item.currentOrgName = item.existOrgName;
                        //this.$refs['org' + index].setCurrentOrg();
                    });
                    if(this.dataForm.checkType == '0'){
                        this.dataForm.checkTypeName = '日常检查';
                    }else if(this.dataForm.checkType == '1'){
                        this.dataForm.checkTypeName = '监督检查';
                    }else if(this.dataForm.checkType == '2'){
                        this.dataForm.checkTypeName = '体系审核';
                    }
                    if(this.dataForm.checkLevel == '0'){
                        this.dataForm.checkLevelName = '公司级';
                    }else if(this.dataForm.checkLevel == '1'){
                        this.dataForm.checkLevelName = '二级单位级';
                    }else if(this.dataForm.checkLevel == '2'){
                        this.dataForm.checkLevelName = '班组级';
                    }
                    setTimeout(() => {
                        for(let i=0; i < this.pointData.length ; i ++){
                            this.$refs['user' + i].setCurrentUser();
                            //this.$refs.user1.setCurrentUser();
                            this.$refs['org' + i].setCurrentOrg();
                            //this.$refs.org1.setCurrentOrg();
                        }
                    }, 1000);
                }).catch(e => {
                    this.$Message.error('请求失败' + e);
                })
            },
            saveData() {
              /*  this.$refs.dataForm.validate((valid) => {
                    console.log(111111)
                    if (valid) {*/
                this.buttonLoading=true
                let subForm = {};
                        subForm.instanceMap = this.dataForm;
                        this.pointData.forEach((item)=>{
                            item.reportDate = this.formatDate(new Date(item.reportDate), 'yyyy-MM-dd');
                            /* delete item['currentUser'];
                             delete item['currentOrgId'];
                             delete item['currentOrgName'];*/
                        });
                        subForm.problemList = this.pointData;
                        //console.log(subForm)
                        /*if (this.dataForm.mainTaskId == undefined) {
                            this.dataForm = Object.assign(JSON.parse(sessionStorage('paramUserInfo').get('userInfo')), this.dataForm);
                        }*/

                        this.$http.post(Api.saveOrUpdateCheckNoModel,  subForm ).then((res) => {
                            this.$Message.success("保存成功")
                            //this.model1 = false;
                            this.$emit('closeModel');
                            this.$emit('query'); this.buttonLoading=false
                            //this.query();
                        }).catch(e => {
                            //this.model1 = false;
                            this.$emit('closeModel');
                            this.$emit('query'); this.buttonLoading=false
                            //this.query();
                            this.$Message.error("数据保存失败")
                        })



                /*    } else {
                        this.$Message.error('请填报完整!');
                    }
                })*/
            },
            query() {
                let data = {
                    currentPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    userId: JSON.parse(sessionStorage('paramUserInfo').get('userInfo'))["createUserId"]
                }

                data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));

                let url = Api.getSecurityCheckTaskList;
                this.$http.get(url, {params: data}).then((res) => {
                    this.dataTable = res.data.data;
                    this.pagedata.total = res.data.totalSize;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset() {
                this.form1 = {};
                this.query();
            },
            getSelectRows (rows){
                this.selectRows = rows;
            },
            toSubmit(){
                let selectRows =  this.selectRows;
                if(selectRows.length == 0 || selectRows.length >1){
                    this.$Message.info('请选择一条数据！');
                    return;
                }
                let mainTaskId = selectRows[0].mainTaskId;
                let taskCheckLineId = selectRows[0].taskCheckLineId;
                let taskCheckPointId =  selectRows[0].taskCheckPointId;
                let userId = JSON.parse(sessionStorage('paramUserInfo').get('userInfo'))["createUserId"];
                let orgId = JSON.parse(sessionStorage('paramUserInfo').get('userInfo'))["createOrgId"];

                let formData = {
                    mainTaskId : mainTaskId,
                    taskCheckLineId : taskCheckLineId,
                    taskCheckPointId : taskCheckPointId,
                    userId : userId,
                    orgId : orgId,
                };
                if(selectRows[0].taskStatus == '3'){
                    this.$Message.warning('已执行的任务不可提交,请确认！');
                    return;
                }
                let _this= this;
                let config={
                    title:'系统提示',
                    content:'确认提交选中数据吗?',
                    okText:'确定',
                    cancelText:'取消',
                    onOk:function(){
                        _this.$Spin.show({
                            render: (h) => {
                                return h('div', [
                                    h('Icon', {
                                        'class': 'demo-spin-icon-load',
                                        props: {
                                            type: 'ios-loading',
                                            size: 18
                                        }
                                    }),
                                    h('div', 'Loading')
                                ])
                            }
                        });
                        let url = Api.securityCheckSubmitTask;
                        this.$http.get(url, {params: formData}).then((res) => {
                            if (res.data.result == "success") {
                                _this.$Message.success('提交成功!');
                                _this.query();
                                _this.$Spin.hide();
                            } else {
                                this.$Message.error("提交失败！");
                            }

                        }).catch(e => {
                            _this.$Spin.hide();
                            _this.$Message.error('提交失败' + e);
                        })
                    },
                    onCancel:function(){
                    }
                }
                this.$Modal.confirm(config);
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        },
    }
</script>
<style lang='css'>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
